<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <link rel="icon" type="image/png" th:href="@{../static/image/icon.ico}"/>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"  media="all">
</head>
<style>
html{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-style: sans-serif;
}

body{
    width: 100%;
    height: 100%;
    font-family: 'Open Sans',sans-serif;
    margin: 0;
    background:url('../static/image/background.png') repeat;
}
.container{
    width: 420px;
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    position: absolute;
    top: -100px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    padding: 20px;
    z-index: 130;
    border-radius: 8px;
    box-shadow: 11px 6px 18px 11px rgba(206, 184, 135, 1);
    font-size: 16px;
}
.layui-input{
    border-radius: 5px;
    width: 300px;
    height: 40px;
}
.layui-form-item{
    margin-left: -20px;
}
.kaptcha{
    width: 140px;
}
.kaptchaImage{
    width:115px;
    height:40px;
    margin-top: -65px;
    margin-left: 185px;
}
.layui-btn{
    margin-left: 0px;
    border-radius: 5px;
    width: 300px;
    height: 40px;
    font-size: 15px;
}
.font-set{
    font-size: 13px;
    text-decoration: none;
    margin-left: 120px;
}
.title{
     font-size: 20px;
     color:#fff;
     margin-left:40%;
}
.layui-form-label{
    color:#fff;
}
</style>
<body>
    <div class="container">
        <div class="layui-form-item">
                <span class="title">XX管理后台</span>
        </div>
        <form class="layui-form" action="/loginSubmit.html"  lay-filter="example" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="username" required="required" autocomplete="off" placeholder="请输入账户" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="password"  required="required"  placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block" >
                    <input type="text" name="kaptcha" lay-verify="kaptcha"  id="kaptcha"  required="required"  placeholder="验证码" autocomplete="off" class="layui-input kaptcha">
                    <img src="/kaptcha.html"  class="kaptchaImage" id="kaptchaImage" title="看不清，点击换一张"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="loginSubmit">登录</button>
                </div>
            </div>
            <a href="#" class="font-set"><font color="#fff">忘记密码?</font></a>  <a href="/register.html" class="font-set"><font color="#fff">立即注册</font></a>
        </form>
    </div>
<script th:src="@{../static/layui/layui.js}" charset="utf-8"></script>
<script>
layui.use('form', function(){
	  var form = layui.form;
	  var $ = layui.jquery;
	  //自定义验证规则
	  form.verify({
		username: function(value){
	        if(value.length==0){
	          return '账户名称不能为空';
	        }
	    }
	    ,password:function(value){
	    	if(value.length==0){
	            return '请输入密码';
	        }
	    }
	    ,kaptcha:function(value){
	    	if(value.length==0){
	            return '请输入验证码';
	        }
	    	if(kaptchaCheck()==500){
	    		return "验证码输入错误";
	    	}
	    }
	  });
	  //监听提交
	  form.on('submit(loginSubmit)', function(data){
	      if(kaptchaCheck()!=200){
			  return ;
		  }
		  $.ajax({
	          async: false,
	          type: "post",
	          url: "/loginSubmit.html",
	          data:data.field,
	          success: function(data) {
	          	if(data.code==200){
	          		layer.msg(data.message, {icon: data.icon,time: 1000}, function(){
			  			   window.location.href="/user/index.html";
					});
	          	}else{
	          		console.info(data.code);
	          		layer.msg(data.message, {icon: 2});
	          		$("#kaptchaImage").attr("src","/kaptcha.html");
	          	}
	          }
	      });
	  });
	
	  $("#kaptchaImage").click(function(){
		$("#kaptchaImage").attr("src","/kaptcha.html");
	  });
	<!--  $("#kaptcha").blur(function(){-->
	<!--	  kaptchaCheck();-->
	<!--  })-->
	  //验证码验证
	  function kaptchaCheck(){
		  var result;
		  var kaptcha=$("#kaptcha").val();
		  $.ajax({
	          async: false,
	          type: "post",
	          url: "/checkKaptcha.html",
	          data:{kaptcha:kaptcha},
	          success: function(data) {
	          	if(data.code==200){
	          		result=200;
	          	}else{
	          		result=500;
	          		$("#kaptchaImage").attr("src","/kaptcha.html");
	          	}
	          }
	      });
		  return result;
	  }
});
</script>
</body>
</html>